<template>
  <div class="recomList">
    <div v-for="(item) in recomList" class="box" :key="item.id">
      <!-- mv列表 -->
      <div v-if="item.mv" @click="toMv(item.id)">
        <img :src="item.picUrl" alt="">
        <div class="clickCount">
          {{item.playCount|palyCount}}</div>
        <div class="des">{{item.name}}</div>
        <i class="iconfont icons">&#xe624;</i>
      </div>
      <!--歌单列表 -->
      <div v-else @click="toSongList(item.id)">
        <img :src="item.picUrl" alt="">
        <div class="clickCount">
          {{item.playCount|palyCount}}</div>
        <div class="des">{{item.name}}</div>
      </div>
    </div>

  </div>
</template >

<script>
export default {
  props: {
    recomList: Array
  },

  methods: {
    toMv(ids) {
      this.$router.push({
        path: '/mv',
        query: {
          ids: ids
        }
      });
    },
    toSongList(ids) {
      this.$router.push({
        path: '/songList',
        query: {
          ids: ids
        }
      });
    }
  },
  filters: {
    palyCount(value) {
      if (value / 10000 > 10) {
        return (value / 10000).toFixed(1) + '万';
      }
      return value;
    }
  }
};
</script>

<style lang="less" scoped>
.icons {
  color: rgb(194, 186, 186);
  font-size: 39px;
  position: absolute;
  top: calc(50% - 35px);
  left: calc(50% - 19px);
}
.des {
  font-size: 14px;
  text-align: center;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recomList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
img {
  width: 100%;
  height: 105px;
  margin-bottom: 4px;
}
.box {
  width: 31%;
  height: 145px;
  position: relative;
  padding-bottom: 20px;
}
.clickCount {
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  font-size: 12px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  &::before {
    content: '';
    background-image: url();
    background-repeat: no-repeat;
    position: absolute;
    width: 12px;
    height: 12px;
    left: -14px;
    top: 0px;
  }
}
</style>
